<template>
	<view style="position: relative;">
		<view style="filter: blur(12px);position: absolute;left: 0;right: 0;z-index: 0;">
		    <image style="width: 100%;height: 400rpx;" mode="aspectFill" src="http://www.apesk.net/cdn/static/img-back-2.png"></image>
			<view style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #00000000;"></view>
		</view>
		 
		<view style="position: absolute;left: 0;right: 0;z-index: 2;">
		    <view @click="onIndex" style="color: white;padding: 20rpx;font-size: 16px;display: flex;align-items: center;">
			 <u-icon name="arrow-left" color="white"></u-icon>
			 首页
			</view>
		</view>
		
		<view style="position: absolute;top:100rpx;left: 0;right:0;z-index: 2;display: flex;padding: 20rpx;justify-content: space-between;">
		    <view style="color: white;border-radius: 10rpx;overflow: hidden;">
				<u-image src="http://www.apesk.net/cdn/static/img-back-2.png" width="160" height="80"></u-image>
			</view>
			
			<view style="display: flex;flex-direction: column;justify-content: flex-end;">
				<view style="display: flex;align-items: center;color: white;background-color: #00000045;padding: 10rpx 20rpx;border-radius: 10rpx;">
					<i class="iconfont icon-erweima" style="font-size: 40rpx;margin-right: 10rpx;color: #ff8c00"></i>
					<view style=";">微信好友</view>
				</view>
				
				<view style="display: flex;align-items: center;color: white;background-color: #00000045;margin-top:20rpx;padding: 10rpx 20rpx;border-radius: 10rpx;">
					<i class="iconfont icon-erweima" style="font-size: 40rpx;margin-right: 10rpx;color: #00ff11"></i>
					<view style=";">加微信群</view>
				</view>
			</view>
		</view>
		 
		<view style="background-color: transparent;z-index: 20;position: fixed;left:0;right:0;bottom: 0;top: 350rpx;bottom: 0;display: flex;flex-direction: column;overflow: hidden;background-color: white;border-radius: 40rpx 40rpx 0 0;">
			<view style="text-align: center;padding: 20rpx;font-weight: bold;">兔小宝的兼职墙</view>
			<view style="width: 100%;">
				<u-tabs :list="tabList" @click="click"></u-tabs>
			</view>
			<view style="flex: 1;position: relative;">
				<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;">
					<scroll-view :scroll-y="true" style="height: 100%;">
						<view style="">
							<view>
								<view style="padding: 20rpx;display: flex;flex-wrap: wrap;">
									<view style="margin-top: 10rpx;margin-right: 10rpx;padding: 5px 8px;background-color: #ff8c00;border-radius: 10rpx;color: white;">
										#顺德陈村
									</view>
									<view style="margin-top: 10rpx;margin-right: 10rpx;padding: 5px 8px;background-color: #eee;border-radius: 10rpx;">
										#顺德北滘
									</view>
									<view style="margin-top: 10rpx;margin-right: 10rpx;padding: 5px 8px;background-color: #eee;border-radius: 10rpx;">
										#顺德勒流
									</view>
									<view style="margin-top: 10rpx;margin-right: 10rpx;padding: 5px 8px;background-color: #eee;border-radius: 10rpx;">
										#广州天河
									</view>
									<view style="margin-top: 10rpx;margin-right: 10rpx;padding: 5px 8px;background-color: #eee;border-radius: 10rpx;">
										#江门四会
									</view>
									<view style="margin-top: 10rpx;margin-right: 10rpx;padding: 5px 8px;background-color: #eee;border-radius: 10rpx;">
										#东莞大都
									</view>
								</view>
								
								<view v-for="i in 3" style="display: flex;flex-direction: column;">
									<view style="border-radius: 15rpx;box-shadow: 0 0 14px 0 #88888855;margin: 20rpx;">
										<view style="display: flex;justify-content: space-between;padding: 30rpx 20rpx 0 20rpx;">
											<view style="font-weight: bold;font-size: 16px;align-items: center;">
												顺德喜来登酒店
											</view>
											<view style="color: #888;font-size: 13px">
												<text style="font-size: 12px;">详情报名>></text>
											</view>
										</view>
										
										<view style="display: flex;justify-content: space-between;padding: 30rpx 20rpx 0 20rpx;">
											<view style="font-size: 13px;align-items: center;">
												2023-10-29 周四
											</view>
											<view style="color: #888;font-size: 13px">
												<text style="font-size: 20px;color: orangered;padding: 0 10rpx;">16</text> 
												<text style="font-size: 12px;">元/小时</text>
											</view>
										</view>
										
										<view style="display: flex;justify-content: space-between;padding: 20rpx 20rpx 0 20rpx;">
											<view style="color: #888;font-size: 13px;display: flex;align-items: center;">
												<i class="iconfont icon-fujinjianzhi1" style="width: 35rpx;height: 35rpx;margin-right: 10rpx;"></i>
												佛山.顺德 佛山市顺德区大良喜来登酒店16号
											</view>
										</view>
										
										<view style="display: flex;justify-content: flex-start;flex-wrap:wrap;padding: 020rpx;">
											<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
												提前30分钟到场
											</view>
											<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
												提供晚餐
											</view>
											<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
												要求女生
											</view>
											<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
												加班补贴
											</view>
											<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
												节日礼品
											</view>
											<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
												隔天住宿
											</view>
											<view style="color: #888;font-size: 13px;background-color: #eee;margin:10rpx 10rpx 0 0;padding: 4px 5px;border-radius: 5px;">
												身高170cm以上
											</view>
										</view>
										
										<view style="display: flex;padding: 0 20rpx 20rpx ">
											<view style=";width: 100%;color: #888;font-size: 13px;background-color: #eee;margin:10rpx 0rpx 0 0;padding: 4px 5px;border-radius: 5px;">
												有意向的同学,立即添加微信,长期做的有更多福利<br/>微信号: xiaoyan265478 飞机勿扰,谢谢!
											</view>
										</view>
										
										<view style="padding-bottom: 10rpx;">
											<view v-for="i in 3" style="padding:20rpx;border-top: solid 1rpx #eee;display: flex;justify-content: space-between;">
												<view style="font-weight: bold;">
													西餐厅服务员
												</view>
												<view>
													下午13:30-19:30
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[
					{
						name: '兼职',
					}, {
						name: '动态',
					}
				]
			}
		},
		methods: {
			onIndex(){
				
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style>

</style>
